<template>
	<div class="center_right">
		<div class="center_rightlabel">
			个人信息
		</div>
		<div class="center_infocont beautifulScroll">
			<div class="center_rightuser">
				<div class="center_userinfoP1">
					基本资料
				</div>
				<div class="center_userinfoP2">
					姓名：<span>{{userinfo.studentName}}</span>
				</div>
				<div class="center_userinfoP2">
					性别：{{userinfo.sex == "F"?'女':'男'}}
				</div>
				<div class="center_userinfoP2 ">
					班级：<span>{{userinfo.organizationName}}</span>
				</div>
				<div class="center_userinfoP2 ">
					学号：<span>{{userinfo.studentNo}}</span>
				</div>
				<!--<div class="center_userinfoP2 ">
					联系电话：<span>{{userinfo.mobile || '-'}}</span>
				</div>-->
				<div>
					<!--<el-button type='primary' size='small' @click='editing = true'>修改个人信息</el-button>-->
					<el-button type='primary' size='small' @click='showpass = true'>修改密码</el-button>
				</div>
			</div>
		</div>
		
		<el-dialog title="修改密码" :visible.sync="showpass" :append-to-body='true' width="450px" :close-on-click-modal='false' :close-on-press-escape='false' :show-close='false'>
			<div class="center_edit">
				<el-form :model="passForm" :rules="rules" ref="passForm" label-width="100px" class="center_editForm">
					<el-form-item label="旧密码" prop="password" class="pas_pass">
						<el-input type="password" v-model="passForm.password" placeholder="请输入旧密码" autocomplete="off" clearable style='width: 300px;'></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="newPassword" class="pas_pass">
						<el-input type="password" v-model="passForm.newPassword" placeholder="请输入新密码" autocomplete="off" clearable style='width: 300px;'></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirmPassword" class="pas_pass">
						<el-input type="password" v-model="passForm.confirmPassword" placeholder="请再次输入新密码" autocomplete="off" clearable style='width: 300px;'></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="center_btns">
				<el-button @click="resetPassForm()">取消</el-button>
				<el-button type='primary' @click="submitPassForm()">修改</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { selectStudentDetail ,studentUpdatePwd} from "@/api/center.js"
	import { removeToken, removeStorageToken } from '@/utils/auth'
	export default {
		data() {
			var validatePass0 = (rule, value, cadd_backimg) => {
				if(value === '') {
					cadd_backimg(new Error('请输入旧密码'));
				} else {
					cadd_backimg();
				}
			};
			var validatePass = (rule, value, cadd_backimg) => {
				if(value === '') {
					cadd_backimg(new Error('请输入新密码'));
				} else {
					if(this.passForm.confirmPassword !== '') {
						this.$refs.passForm.validateField('confirmPassword');
					}
					cadd_backimg();
				}
			};
			var validatePass2 = (rule, value, cadd_backimg) => {
				if(value === '') {
					cadd_backimg(new Error('请再次输入密码'));
				} else if(value !== this.passForm.newPassword) {
					cadd_backimg(new Error('两次输入密码不一致!'));
				} else {
					cadd_backimg();
				}
			};
			return {
				userinfo: {},
				showpass: false,
				passForm: {
					password: '',
					newPassword: '',
					confirmPassword: '',
				},
				rules: {
					password: [{
						required: true,
						message: "请输入旧密码",
						trigger: "blur"
					}, {
						validator: validatePass0,
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: "请输入新密码",
						trigger: "blur"
					}, {
						validator: validatePass,
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: "请确认密码",
						trigger: "blur"
					}, {
						validator: validatePass2,
						trigger: 'blur'
					}],
				},
			}
		},
		created() {
			this.getMyInfo();
		},
		mounted() {

		},
		methods: {
			getMyInfo() {
				selectStudentDetail().then(res => {
					this.userinfo = res.data;
				})
			},
			submitPassForm() {
				this.$refs.passForm.validate((valid) => {
					if(valid) {
						studentUpdatePwd({
							oldPassword: this.passForm.password,
							newPassword: this.passForm.newPassword,
						}).then(res => {
							if(res.code == '200') {
								this.$alert('修改成功，请重新登陆！', '提示', {
									confirmButtonText: '确定',
									type: 'warning'
								}).then(() => {
									removeStorageToken();
									location.reload()
								}).catch(() => {
									removeStorageToken();
									location.reload()
								})
							} else {
								this.$message({
									type: "error",
									message: res.msg
								})
							}
						})
					}
				});
			},
			resetPassForm() {
				this.$refs.passForm.resetFields();
				this.showpass = false;
			},
		},
	}
</script>